<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    html, body {
        margin: 0;
        padding: 0;
    }
    #content {
        width: 100%;
        height: 2000px;
        background: -webkit-linear-gradient(180deg, #1371c6, #61c6f2);
        background: -o-linear-gradient(180deg, #1371c6, #61c6f2);
        background: -moz-linear-gradient(180deg, #1371c6, #61c6f2);
        background: linear-gradient(180deg, #1371c6, #61c6f2);
        font-size: 40px;
        color: #fff;
        text-align: center;
        line-height: 10;
    }
    #toTop {
        position: fixed;
        right: 10px;
        bottom: -40px;
        cursor: pointer;
        transition: all .3s;
    }
    </style>
</head>

<body>
    <div id="content">
        向下拖动滚动条
    </div>
    <div id="toTop"><img src="top.png" alt=""></div>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script>
    $(function() {
        $(window).scroll(function() {
            var t = $(window).scrollTop();
            if (t > 200) {
                $("#toTop").css('bottom', '10px');
            } else {
                $("#toTop").css('bottom', '-40px');
            }
        });
        $("#toTop").click(function() {
            $('body,html').animate({ scrollTop: 0 }, 1000);
            return false;
        });
    });
    </script>
</body>

</html>